<template>
<div class="headerCon">
    <div class="header clearfix">
        <p class="welcomeTitle ">{{ welcomeTitle }}</p>
        <div class="login_info clearfix">
            <router-link v-show="!isLogin" to="/login">
                登录
            </router-link>
            <p v-show="isLogin">
                欢迎您：{{ userModel.username }}
            </p>
            <el-divider class="login_info_divider" direction="vertical">
            </el-divider>
            <router-link v-show="!isLogin" to="/register">
                注册
            </router-link>
            <a v-show="isLogin" @click="loginOut">
                退出
            </a>
            <el-divider class="login_info_divider" direction="vertical">
            </el-divider>
            <router-link to="/">
                用户中心
            </router-link>
            <el-divider class="login_info_divider" direction="vertical">
            </el-divider>
            <router-link to="/">
                购物车
            </router-link>
            <el-divider class="login_info_divider" direction="vertical">
            </el-divider>
            <router-link to="/">
                我的订单
            </router-link>
        </div>
    </div>
</div>
</template>

<script>

export default {
    name :"HeaderInfo",
    data(){
        return{
            'welcomeTitle':'欢迎来到天天生鲜',
            'isLogin': this.$store.state.isLogin,
            'userModel':this.$store.state.userModel,
        }
    },
    methods:{
        loginOut:function(){
            this.$emit('loginOut');
        },
    }
}
</script>

<style>
.headerCon{
    width:100%;
    height:30px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dddddd;
}
.header{
    /* margin-left: 250px; */
    /* margin-right: 250px; */
    height:30px;
    margin-left: 10%;
    margin-right: 10%;
   
}
.welcomeTitle{
    float: left;
    line-height: 30px;
}
.login_info{
    float: right;
    height:100%;
}

 .login_info a{
    line-height: 30px;
    color: #666;
    float: left;
    cursor: pointer;
}

.login_info p{
    line-height: 30px;
    color: #666;
    float: left;
}

.login_info_divider{
    float: left;
    line-height: 30px;
    color: #666;
    top: 10px;
} 
</style>